<template>
	<view class="myWallet">
		<view class="pageHead">
			<view class="headStatus" :style="{height: sysHeight}"></view>
			<view class="headNav">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<view class="headTitle">
					<!-- 我的钱包 -->
					توك پۇلى تۈلەش
				</view>
			</view>
		</view>
		<view class="bodyWrap" :style="{height: 'calc(100vh - ' + headH + ')'}">
			<view class="waterCard">
				<view class="cardTitle rtl">
					مىنىڭ  ھىساۋاتىم(يۈەن) 
				</view>
				<view class="cardMoney">
					{{userTotal.now_money || 0}}
				</view>
				<view class="cardInfo">
					<view class="infoItem" @click="toIncome">
						<view class="infoTitle rtl">
							كىرىمىم (يۈەن)
						</view>
						<view class="infoMoney">
							{{userTotal.brokerage_money || 0}}
						</view>
					</view>
					<view class="line"></view>
					<view class="infoItem">
						<view class="infoTitle rtl">
							 ئۇمۇمىي نەقلەشتۈرگىنىم (يۈەن)
						</view>
						<view class="infoMoney">
							{{userTotal.withdrawal_money || 0}}
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scrollStyle" lower-threshold="30" @scrolltolower="LoadMoreCustomers">
				<view class="waterBox" v-for="(item, index) in listData" :key="index">
					<view class="boxHead">
						<view class="headLeft">
							{{item.balance}}
							كىرىمىم
						</view>
						<view class="headRgt">
							{{item.time}}
							<image class="sanjiao" src="/static/images/air-sanjiao.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="boxContent">
						<view class="itemContent" v-for="(childrenItem, childrenIndex) in item.list" :key="childrenIndex">
							<view class="contentMoney">
								{{childrenItem.number}}
							</view>
							<view class="contentRgt">
								<view class="rgtTitle">
									{{childrenItem.title}}
								</view>
								<view class="rgtTime">
									{{childrenItem.addTime}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="subBox">
				<view class="btmSub">
					<view class="subBtn" @click="withdrawal"> نەقلەشتۈرۈش</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let headH= uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
	import { userWallet, userWithdrawal } from '@/api/dailyLife.js'
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				headH: headH,
				page: 1,
				isLoadMore: false,
				userTotal: null,
				listData: []
			};
		},
		
		methods: {
			// 后退
			returns() {
				return uni.navigateBack({
					delta: 1,
				})
			},
			toIncome() {
				uni.navigateTo({
					url: '/pages/users/myIncome/index',
				})
			},
			async loadData(type = '') {
				uni.showLoading({
					title: ''
				});
				try{
					let resData = await userWallet({
						page: this.page
					})
					uni.hideLoading();
					this.userTotal = resData.data.user;
					if (type === 'updateUser') {
						return;
					}
					if (resData.data.bill.length) {
						let useData = JSON.parse(JSON.stringify(this.listData));
						let billData = JSON.parse(JSON.stringify(resData.data.bill));
						if (this.listData.length) {
							// 当前数据最后显示的月份
							const endTime = useData[useData.length - 1].time;
							// 新数据开始的月份
							const startTime = billData[0].time;
							// 如果下一页的月份和之前的一样 进行数据合并
							if (endTime === startTime) {
								useData[useData.length - 1].list = useData[useData.length - 1].list.concat(billData[0].list);
								billData.shift()
							}
						}
						this.listData = useData.concat(billData)
						this.isLoadMore = false
					} else {
						this.isLoadMore = true
					}
				}catch(e){
					console.log('err', e);
					if(this.page > 1){
						this.page-=1
					}
					this.isLoadMore = false
					uni.hideLoading();
				}
			},
			// 触底事件
			LoadMoreCustomers() {
				if (!this.isLoadMore) {
					this.isLoadMore = true
					this.page = this.page + 1
					this.loadData();
				}
			},
			// 提现
			withdrawal() {
				const that = this;
				uni.showModal({
					title: that.$i18n['提示'],
					content: that.$i18n['确认提现吗？'],
					cancelText: that.$i18n['取消'],
					confirmText: that.$i18n['确认'],
					success: function (res) {
						if (res.confirm) {
							that.againWithdrawal()
						} else if (res.cancel) {
						}
					}
				});
			},
			async againWithdrawal() {
				uni.showLoading({
					title: ''
				});
				let that = this;
				try{
					const resData = await userWithdrawal();
					if (resData.code === 1) {
						that.loadData('updateUser');
						uni.requestSubscribeMessage({
							tmplIds: ['QHonRVlm9mmiTfG2wGTFzztti7wrvtF0EQhYRdU1w8g', 'fjR0a2z40cCsj79HkhVcGLdb-uIT_fBCy1GqiyJ9GiA', 'tMStu-1-sq7CpYxQE0XLuBE1lJ90jtbonytRa2kgcsI'],
							complete (e) {
								uni.showModal({
									title: that.$i18n['提示'],
									content: that.$i18n['申请提现成功'],
									showCancel: false,
									confirmText: 'ok'
								});
							}
						})
					} else {
						uni.showModal({
							title: that.$i18n['提示'],
							content: resData.msg,
							showCancel: false,
							confirmText: 'ok'
						});
					}
					uni.hideLoading();
				}catch(e){
					console.log(e)
					uni.showModal({
						title: that.$i18n['提示'],
						content: that.$i18n['提现失败'],
						showCancel: false,
						confirmText: 'ok'
					});
					uni.hideLoading();
				}
			}
			
		},
		onLoad() {
			this.loadData();
		}
	}
</script>

<style lang="scss">
	.myWallet {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDD048 0%, #FAF6ED 444rpx, #FFF 445rpx, #FFF 100%);
		.pageHead {
			.headStatus {
				width: 100%;
			}
			.headNav {
				display: flex;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 36rpx;
				color: #333;
				.icon-fanhui2 {
					position: absolute;
					left: 40rpx;
				}
				.headTitle {
					width: 100%;
					height: 43px;
					line-height: 43px;
					width: 100%;
					text-align: center;
				}
			}
		}
		
		.waterCard {
			width: 690rpx;
			height: 376rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 20rpx 4rpx rgba(179,175,175,0.2500);
			border-radius: 8rpx;
			margin: 0 auto 40rpx;
			padding: 50rpx 50rpx 0;
			
			.cardTitle {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				text-align: right;
			}
			
			.cardMoney {
				margin-top: 38rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 60rpx;
				font-weight: 500;
				color: #333333;
				text-align: right;
			}
			
			.cardInfo {
				margin-top: 50rpx;
				border-top: 2rpx solid #f1f1f1;
				display: flex;

				.infoItem {
					flex: 1;
					padding-top: 20rpx;
					text-align: center;
					
					.infoTitle {
						line-height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
					}
					.infoMoney {
						line-height: 44rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-top: 10rpx;
					}
				}
				
				.line {
					width: 4rpx;
					height: 44rpx;
					margin-top: 60rpx;
				}
			}
		}
		
		.bodyWrap {
			padding: 30rpx 0 0;
			overflow-y: auto;
			.scrollStyle {
				height: calc(100% - 376rpx - 212rpx - 30rpx - 40rpx);
			}
			.waterBox {
				background-color: #fff;
				
				.boxHead {
					width: 750rpx;
					height: 120rpx;
					background: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx;
					
					.headLeft {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
					
					.headRgt {
						height: 60rpx;
						border-radius: 27rpx;
						color: #2f2f2f;
						font-size: 28rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						
						.sanjiao {
							margin-left: 10rpx;
							width: 12rpx;
						}
					}
				}
				.boxContent {
					padding: 0rpx 40rpx;
					
					.itemContent {
						padding: 30rpx 0rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 2rpx solid #f6f6f6;
						
						&:last-child {
							border-bottom: none;
						}
						
						.contentMoney {
							font-size: 36rpx;
							font-weight: 500;
							color: #E9550E;
						}
						.contentMoney {
							.rgtTitle {
								height: 32rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #666666;
							}
							.rgtTime {
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								line-height: 24rpx;
								margin-top: 16rpx;
							}
						}
					}
				}
			}
		}
		.subBox {
			width: 100%;
			height: 212rpx;
			.btmSub {
				width: 100%;
				height: 212rpx;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				background-color: #fff;
				.subBtn {
					width: 670rpx;
					height: 108rpx;
					line-height: 108rpx;
					text-align: center;
					background: linear-gradient(178deg, #FFCE53 0%, #FDD04A 100%);
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					margin: 10rpx auto 0;
				}
			}
		}
	}
</style>
